<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/pub.css">
</head>

<body>
    <div class="floor head">
        <div class="head-top">
            <div class="welcome">爱书的朋友们，欢迎来淘书！</div>
            <ul>
                <li>
                    <a href="index.html">首页</a>
                    <a href="pages/login.html">我的淘书</a>
                    <a href="pages/car.html">购物车</a>
                    <a href="">帮助中心</a>
                    <a href="">400-8888-184</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="w"><img src="static/img/test01.jpg" alt=""></div>
    <header class="header">
        <div class="w">
            <div class="logo"><img src="static/img/taoshu-logo.jpg" alt=""></div>
            <div class="search">
                <input type="text" placeholder="请输入关键词" id="txt1"><input type="button" value="搜索" id="sea">
            </div>
        </div>
    </header>
    <nav class="nav">
        <div class="w">
            <div class="book">全部图书分类</div>
            <ol>
                <li><a href="pages/list.html">文学</a></li>
                <li><a href="pages/list.html">小说</a></li>
                <li><a href="pages/list.html">传记</a></li>
                <li><a href="pages/list.html">艺术</a></li>
                <li><a href="pages/list.html">收藏/鉴赏</a></li>
                <li><a href="pages/list.html">经济管理</a></li>
                <li><a href="pages/list.html">自我实现/励志</a></li>
                <li><a href="pages/list.html">考试</a></li>
                <li><a href="pages/list.html">青春文学</a></li>
                <li><a href="pages/list.html">散文随笔</a></li>
            </ol>
        </div>
    </nav>
    <!-- 4-1good morning -->
    <article class="article">
        <div class="w">
            <aside class="aside">
                <ul>
                    <li>
                        <span>人文社科</span>
                        <ol style="display: block;">
                            <li><a href="pages/build.html">国学</a></li>
                            <li><a href="pages/build.html">哲学</a></li>
                            <li><a href="pages/build.html">社会科学</a></li>
                            <li><a href="pages/build.html">历史</a></li>
                        </ol>
                    </li>
                    <li><span>文学艺术</span>
                        <ol>
                            <li><a href="pages/build.html">文学</a></li>
                            <li><a href="pages/build.html">小说</a></li>
                            <li><a href="pages/build.html">青春文学</a></li>
                            <li><a href="pages/build.html">艺术</a></li>
                        </ol>
                    </li>
                    <li> <span>电脑网络</span>
                        <ol>
                            <li><a href="pages/build.html">计算机网络</a></li>
                            <li><a href="pages/build.html">操作系统</a></li>
                            <li><a href="pages/build.html">数据库</a></li>
                            <li><a href="pages/build.html">网络数据通信</a></li>
                        </ol>
                    </li>
                    <li><span>生活时尚</span>
                        <ol>
                            <li><a href="pages/build.html">家居</a></li>
                            <li><a href="pages/build.html">美食</a></li>
                            <li><a href="pages/build.html">娱乐时尚</a></li>
                            <li><a href="pages/build.html">健康</a></li>
                        </ol>
                    </li>
                    <li><span>教育教材</span>
                        <ol>
                            <li><a href="pages/build.html">教育</a></li>
                            <li><a href="pages/build.html">教材</a></li>
                            <li><a href="pages/build.html">外语</a></li>
                            <li><a href="pages/build.html">工具书</a></li>
                        </ol>

                    </li>
                    <li> <span>科学技术</span>
                        <ol>
                            <li><a href="pages/build.html">科普读物</a></li>
                            <li><a href="pages/build.html">自然科学</a></li>
                            <li><a href="pages/build.html">工业技术</a></li>
                            <li><a href="pages/build.html">农业科学</a></li>
                        </ol>

                    </li>
                    <li><span>经管法律</span>
                        <ol>
                            <li><a href="pages/build.html">经济</a></li>
                            <li><a href="pages/build.html">管理</a></li>
                            <li><a href="pages/build.html">法律</a></li>
                            <li><a href="pages/build.html">励志</a></li>
                        </ol>
                    </li>
                    <li><span>少儿图书</span>
                        <ol>
                            <li><a href="pages/build.html">亲子读物</a></li>
                            <li><a href="pages/build.html">少儿文学</a></li>
                            <li><a href="pages/build.html">少儿百科</a></li>
                            <li><a href="pages/build.html">才艺课堂</a></li>
                        </ol>
                    </li>
                </ul>
            </aside>
            <!-- 轮播图 -->
            <div class="pic">
                <div class="imgbox">
                    <a><img src="static/img/yueduka1.png" alt=""></a>
                    <a><img src="static/img/yueduka2.png" alt=""></a>
                    <a><img src="static/img/banner2.jpg" alt=""></a>
                    <a><img src="static/img/banner1.jpg" alt=""></a>
                    <a><img src="static/img/banner3.jpg" alt=""></a>
                </div>
                <div class="btnbox">
                    <input type="button" name="" id="left" value="<<<">
                    <input type="button" name="" id="right" value=">>>">
                </div>
            </div>
        </div>
    </article>
    <div class="floor selected">
        <div class="w">
            <div class="title">
                <h2>特价精选</h2>
                <ul>
                    <li>文学</li>
                    <li>国学</li>
                    <li>艺术</li>
                    <li>社科</li>
                    <li>经营</li>
                </ul>
            </div>
            <div class="list">
                <div class="list1">
                    <ul id="cont1"></ul>
                </div>
                <div class="list2">
                    <ul id="cont2"></ul>
                </div>
                <div class="list3">3</div>
                <div class="list4">4</div>
                <div class="list5">5</div>
            </div>
        </div>
    </div>
    <div class="floor NEW">
        <div class="w">
            <div class="title">
                <h2>新书速递</h2>
            </div>
            <div class="list">
                <ul id="cont"></ul>
            </div>
        </div>
    </div>
    <div class="floor biography">
        <div class="w">
            <div class="title">
                <h2>人物志</h2>
                <ul>
                    <li><a href="">人气作者</a></li>
                    <li><a href="">名人大家</a></li>
                    <li><a href="">畅销书作者</a></li>
                </ul>
            </div>
            <div class="art">
                <div class="picture">
                    <img src="static/selected/author_1.jpg" alt="">
                    <p class="nam">爱丽丝·门罗</p>
                </div>
                <div class="instr">
                    <p>爱丽丝·门罗（Alice Munro，1931.07.10~），加拿大女作家，被誉为“加拿大的契诃夫”。1968年发表第一部短篇小说集《快乐影子之舞》，并获得加拿大总督文学奖，后来共创作了14部作品并多次获奖，同时作品被翻译成13种文字传遍全球，受到读者与媒体的高度评价。2013年10月10日，艾丽斯·芒罗获得2013年诺贝尔文学奖，瑞典学院给出的颁奖词是：“当代短篇文学小说大师”。</p>
                </div>
            </div>
        </div>
    </div>
    <footer class="floor footer">
        <div class="w">
            <div class="footer-nav">
                <dl>
                    <dt>新手入门</dt>
                    <dd><a href="">购物流程</a></dd>
                    <dd><a href="">发票制度</a></dd>
                    <dd><a href="">积分说明</a></dd>
                    <dd><a href="">我的订单</a></dd>
                    <dd><a href="">关于特价书</a></dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href="">派送时间和运费</a></dd>
                    <dd><a href="">验货与签收</a></dd>
                    <dd><a href="">订单配送查询</a></dd>

                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="">货到付款</a></dd>
                    <dd><a href="">网上支付</a></dd>
                    <dd><a href="">邮局汇款</a></dd>
                    <dd><a href="">银行转账</a></dd>
                    <dd><a href="">账户余额</a></dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="">退换货政策</a></dd>
                    <dd><a href="">退换货流程</a></dd>
                    <dd><a href="">退换货申请</a></dd>
                    <dd><a href="">退款说明</a></dd>
                    <dd><a href="">申请余额提现</a></dd>
                </dl>
                <dl>
                    <dt>帮助信息</dt>
                    <dd><a href="">常见问题</a></dd>
                    <dd><a href="">找回密码</a></dd>
                    <dd><a href="">汇款单招领</a></dd>
                    <dd><a href="">联系客服</a></dd>
                </dl>
            </div>
            <div class="cooper">
                <span class="Company">合作单位： </span>
                <ul>
                    <li><a href="">读书网</a></li>
                    <li><a href="">中国网读书频道</a></li>
                    <li><a href="">起点中文网</a></li>
                    <li><a href="">人大经济网</a></li>
                    <li><a href="">杂志网</a></li>
                    <li><a href="">大佳网</a></li>
                    <li><a href="">中国教育网</a></li>
                    <li><a href="">出版商务周报</a></li>
                    <li><a href="">作家在线</a></li>
                    <li><a href="">凯迪社区</a></li>
                    <li><a href="">中国教育网</a></li>
                    <li><a href="">出版商务周报</a></li>
                    <li><a href="">作家在线</a></li>
                    <li><a href="">凯迪社区</a></li>
                </ul>
            </div>
            <div class="footer-copy">
                <ul>
                    <li><a href="">关于淘书</a></li>
                    <li><a href="">数目清单</a></li>
                    <li><a href="">网站联盟</a></li>
                    <li><a href="">免费条款</a></li>
                    <li><a href="">数据API</a></li>
                    <li><a href="">友情链接</a></li>
                </ul>
                <ul>
                    <li>Copyright &copy;2012-2015淘书网Taoshu.com版权所有 </li>
                    <span>|</span>
                    <li>京ICP备12020895出版物经营许可证 新出发京零字第朝110069号</li>
                </ul>
            </div>

        </div>
    </footer>
    <div class="fixNav">
        <ul class="list">
            <li>回到顶部</li>
            <li>特价精选</li>
            <li>新书速递</li>
            <li>人物志</li>
            <li>底部</li>
        </ul>
    </div>
</body>
<script src="js/jquery.js"></script>
<script src="js/rotation.js"></script>
<script src="js/ajax-promise.js"></script>
<script>
    //1.轮播图
    $(".pic").banner({
            img: $(".pic").children(".imgbox").find("a"),
            left: $(".pic").find("#left"),
            right: $(".pic").find("#right"),
            list: true,
            autoPlay: true,
            delayTime: 3000,
            moveTime: 300
        })
        //2.楼层
    $(".fixNav .list").children("li").click(function() {
        $("html").animate({
            scrollTop: ($(".floor").eq($(this).addClass("active").siblings().removeClass("active").end().index()).offset().top)
        });
    });
    //3.二级导航
    $(".article .aside").children("ul").children("li").click(function() {
        $(this).addClass("active").siblings().removeClass("active");
        $(this).children("ol").stop().slideDown().end().siblings().children("ol").stop().slideUp();
    });
    //4.选项卡
    $(".selected .title ul").children("li").click(function() {
        $(this).addClass("active").siblings().removeClass("active");
        $(".selected .list div").css("display", "none").eq($(this).index()).css("display", "block");
    })

    //5.页面渲染
    class Rendering {
        constructor() {
            this.url = "http://localhost/project/data/goods.json";
            this.cont = document.getElementById("cont");
            this.cont1 = document.getElementById("cont1");
            this.cont2 = document.getElementById("cont2");
            // console.log(this.cont);
            this.load();
        }
        load() {
            ajax({
                url: this.url
            }).then((res) => {
                this.res = JSON.parse(res);
                this.display();
            })

        }
        display() {
            // console.log(this.res);
            let str = "";
            let str1 = "";
            let str2 = "";
            for (var i = 0; i < this.res.length; i++) {
                str += `<li index="${this.res[i].goodsId}">
                        <a href="pages/details.html">
                            <img src="${this.res[i].img}" alt="">
                            <span class="book-name">${this.res[i].name}</span>
                            <span class="price">${this.res[i].price}</span>
                        </a>
                    </li>`;
                str1 += ` <li index="${this.res[i].goodsId}">
                            <a href="pages/details.html">
                                <img src="${this.res[i].img}" alt="">
                                <span>${this.res[i].name}</span>
                                <span>${this.res[i].price}</span>
                            </a>
                        </li>`;
                str2 += ` <li index="${this.res[i].goodsId}">
                            <a href="pages/details.html">
                                <img src="${this.res[i].img}" alt="">
                                <span>${this.res[i].name}</span>
                                <span>${this.res[i].price}</span>
                            </a>
                        </li>`;

            }
            this.cont1.innerHTML = str1;
            this.cont2.innerHTML = str2;
            this.cont.innerHTML = str;
        }
    }
    new Rendering();
</script>

</html>